<template>
	<view class="files">
		<view v-for="(item,index) in list" :key="index" class="file" @click="downLoad(item)">
			{{item.name || item.fname}}
			<i class="iconfont icon-refuse" @click.stop="remove(item,index)" v-if="!readonly" />
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { confirm, msg } from '/utils/utils.js'
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		readonly: {
			type: Boolean,
			default: () => false
		}
	})

	const downLoad = (item) => {
		confirm(`请确认下载 [ ${item.name || item.fname} ] ！`).then(() => {
			const a = document.createElement('a')
			a.setAttribute('download', item.name || item.fname)
			a.setAttribute('href', item.src)
			a.click()
		}).catch(() => {})
	}

	const remove = (item, index) => {
		confirm(`请确认删除 [ ${item.name || item.fname} ] ！`).then(() => {
			if (item.id) {
				coreApis.fileDelete({ Id: item.id }).then(res => {
					if (res) {
						msg('删除成功！')
						props.list.splice(index, 1)
					}
				})
			} else {
				props.list.splice(index, 1)
			}
		}).catch(() => {})
	}
</script>

<style lang="scss" scoped>
	.files {
		display: flex;
		flex-wrap: wrap;

		.file {
			line-height: 50rpx;
			margin: 10rpx 30rpx 10rpx 0;
			padding: 0 20rpx;
			border-radius: 6rpx;
			background: #eafaf8;
		}
	}
</style>